<template>
   <div>
      <van-divider class="biaoti" :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
         手机号验证码登录
      </van-divider>
      <div class="login">
         <van-form @submit="onSubmit">
            <van-cell-group inset>
               <van-field v-model="username" name="account" label="用户名" placeholder="用户名"
                  :rules="[{ required: true, message: '请填写用户名' }]" />
               <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                  :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
               <van-button round block type="primary" native-type="submit">
                  提交
               </van-button>
            </div>
         </van-form>
      </div>
   </div>
</template>

<script>
import { ref } from 'vue';
import { login } from "../api/login";
import { setToken } from "@/utils/auth";
import { useRouter } from "vue-router";
import { showLoadingToast, showFailToast } from 'vant';
export default {
   setup() {
      const router = useRouter();
      const username = ref('13789135702');
      const password = ref('123456');
      const onSubmit = async (val) => {
         showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            loadingType: 'spinner',
         });
         const res = await login(val);
         if (res.result == 0) {
            setToken(res.data.token);
            router.push({ path: "/" });
         } else {
            console.log(123);
            showFailToast(res.message);
         }
      };

      return {
         username,
         password,
         onSubmit,
         
      };
   },
}
</script>
<style scoped>
/* .login {
   width: 410px;
   height: 500px;
   border: 1px solid #cdcdcd;
   margin: 10px;
   border-radius: 15px;
   margin-top: 100px;
} */

.biaoti {
   font-size: 15px;
}
</style>